import React, { useEffect, useState } from 'react'
import "./Todolist.css"
import Todoheader from '../components/Todoheader/Todoheader'
import Todomain from '../components/Todomain/Todomain'
import Todofooter from '../components/Todofooter/Todofooter'
import useaxios from "../utils/index"
export default function Todolist() {
    let [connet, setconnet] = useState([])
        // 输入框添加数据
        // let addvalue = async (value) => {
        //     let res = await useaxios({
        //         method: "post",
        //         url: "/todolist",
        //         data: {
        //             text: value,
        //             type: false
        //         }
        //     })
        //     setconnet([...connet, res])
        // }
        // // 每个删除数据
        // let delvalue = (id) => {
        //     useaxios({
        //         method: "delete",
        //         url: `/todolist/${id}`,
        //     })
        //     let newconnet = connet.filter((iteam) => {
        //         return iteam.id !== id
    
        //     })
        //     setconnet(newconnet)
    
        // }
        // // 改变勾选框
        // let change = (id, type) => {
        //     useaxios({
        //         method: "patch",
        //         url: `/todolist/${id}`,
        //         data: {
        //             type: !type
        //         }
        //     })
        //     let newcontent = connet.map((iteam) => {
        //         if (iteam.id === id) {
        //             iteam.type = !type
        //         }
        //         return iteam
        //     })
        //     setconnet(newcontent)
    
        // }
    
        // //全选全不选
        // let changvalueall = async (type) => {
        //     connet.map((iteam) => {
        //         return useaxios({
        //             method: "patch",
        //             url: `/todolist/${iteam.id}`,
        //             data: {
        //                 type: type
        //             }
        //         })
        //     })
        //     let newconnet = connet.map((iteam) => {
        //         iteam.type = type
        //         return iteam
    
        //     })
        //     setconnet(newconnet)
    
    
        // }
        // // 清除勾选的数据
        // let delall = () => {
        //     let newconnet = connet.filter((iteam) => {
        //         return iteam.type===true
        //     })
        //     console.log(newconnet);
        //     newconnet.map((iteam)=>{
        //          useaxios({
        //             method: "delete",
        //             url: `/todolist/${iteam.id}`,
        //         })
        //     })
        //  let aa = connet.filter((iteam)=>{
        //     return iteam.type===false
    
        //  })
    
        //     setconnet(aa)
        // }

    // 输入框添加数据
    let addvalue = async (value) => {
        let res = await useaxios({
            method: "post",
            url: "/todolist",
            data: {
                text: value,
                type: false
            }
        })
        setconnet([...connet, res])
    }
    // 每个删除数据
    let delvalue = (id) => {
        useaxios({
            method: "delete",
            url: `/todolist/${id}`,
        })
        let newconnet = connet.filter((iteam) => {
            return iteam.id !== id

        })
        setconnet(newconnet)

    }
    // 改变勾选框
    let change = (id, type) => {
        useaxios({
            method: "patch",
            url: `/todolist/${id}`,
            data: {
                type: !type
            }
        })
        let newcontent = connet.map((iteam) => {
            if (iteam.id === id) {
                iteam.type = !type
            }
            return iteam
        })
        setconnet(newcontent)

    }

    //全选全不选
    let changvalueall = async (type) => {
        connet.map((iteam) => {
            return useaxios({
                method: "patch",
                url: `/todolist/${iteam.id}`,
                data: {
                    type: type
                }
            })
        })
        let newconnet = connet.map((iteam) => {
            iteam.type = type
            return iteam

        })
        setconnet(newconnet)


    }
    // 清除勾选的数据
    let delall = () => {
        let newconnet = connet.filter((iteam) => {
            return iteam.type===true
        })
        console.log(newconnet);
        newconnet.map((iteam)=>{
             useaxios({
                method: "delete",
                url: `/todolist/${iteam.id}`,
            })
        })
     let aa = connet.filter((iteam)=>{
        return iteam.type===false

     })

        setconnet(aa)
    }
    useEffect(() => {
   
        // 初始化axios数据
        let getvalue = async () => {
            let res = await useaxios({
                url: "/todolist"
            })
            setconnet(res)
        }
        getvalue()




    }, [])

    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Todoheader addvalue={addvalue}></Todoheader>
                <Todomain change={change} delvalue={delvalue} connet={connet}></Todomain>
                <Todofooter delall={delall} changvalueall={changvalueall} connet={connet}></Todofooter>
            </div>
        </div>
    )
}
